<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Twitter Trends</title>

<!-- Style Sheets -->
<link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/button.css" />
<!-- bin/jquery.slider.min.css -->
<link rel="stylesheet" href="css/jslider.css" type="text/css"/>
<link rel="stylesheet" href="css/jslider.blue.css" type="text/css"/>
<link rel="stylesheet" href="css/jslider.plastic.css" type="text/css"/>
<link rel="stylesheet" href="css/jslider.round.css" type="text/css"/>
<link rel="stylesheet" href="css/jslider.round.plastic.css" type="text/css"/>
 <!-- end -->
 
<!-- Scripts -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery.slider.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<!-- bin/jquery.slider.min.js -->
<script type="text/javascript" src="js/jshashtable-2.1_src.js"></script>
<script type="text/javascript" src="js/jquery.numberformatter-1.2.3.js"></script>
<script type="text/javascript" src="js/tmpl.js"></script>
<script type="text/javascript" src="js/jquery.dependClass-0.1.js"></script>
<script type="text/javascript" src="js/draggable-0.1.js"></script>
<script type="text/javascript" src="js/jquery.slider.js"></script>
<script src = "https://www.youtube.com/iframe_api"></script>
 <!-- end -->
</head>

<body onload = "init();">
<div id="wrapper" >
      <div id="header">
        	<h1>Twitter Trends</h1>    
        	<p>——Finding what is <span class = "animated pulse">hot</span> now !</p>        
      </div>
      
      <!-- 日期和时间区域 -->
      <div id = "dateAndTime">
      	<div id = "date">
      		<span>Date</span>
      		<select id = "year">
      			<option value = "2013">2013</option>
      		</select>
      		-
      		<select id = "month">
      			<option value = "1">1</option>
      			<option value = "2">2</option>
      			<option value = "3">3</option>
      			<option value = "4">4</option>
      			<option value = "5">5</option>
      			<option value = "6">6</option>
      			<option value = "7">7</option>
      			<option value = "8">8</option>
      			<option value = "9">9</option>
      			<option value = "10">10</option>
      			<option value = "11">11</option>
      			<option value = "12">12</option>
      		</select>
      		-
      		<input id = "day" type = "text"></input>
      		<input id  = "hour" type = "hidden" value = ""></input>
      	</div>
      	
      	<div class="layout-slider">
      		Time
      		<input id="SliderSingle" type="slider" name="time"/>
     	</div>
     	<script type="text/javascript" charset="utf-8">
    	var myDate = new Date();
		var hour = myDate.getHours()-1;
		document.getElementById("SliderSingle").setAttribute("value", hour);
      	jQuery("#SliderSingle").slider(
    		  { 	
    			  from: 0, 
    			  to: 23, 
    			  step: 1, 
    			  round: 1,
    			  format: { format: '##', locale: 'de' }, 
    			  dimension: '&nbsp; o\'clock', 
    			  scale: [0, '|', '|', 3,  '|', '|', 6, '|', '|', 9, '|', '|', 12, '|', '|', 15, '|', '|', 18, '|', '|', 21, '|', 23],
    			  skin: "round" ,
    			  callback: ontimechange
    		  }
    	);
    	</script>   
     	
      </div>

      <div id="container">    
      
        <div id="sidebar">   
        	<div id = "trendsTitle">
        		Trends
        	</div>
        	<div id = "trendDiv">
        		<ul id = "trendlist"><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
        	</div>
        	<div id = "change">
        		<input type="button" class="btn26" value="show another 10" onmouseover="this.style.backgroundPosition='left -36px'" onmouseout="this.style.backgroundPosition='left top'" style="background-position: 0% 0%;" onclick = "show10();"/>
        	</div>    
                  	
        </div><!--sidebar-->
        
        <div id="main">
        	<div id = "current">
        		<input id = "lockedTrend" type="hidden" value=""></input>
        		<h2 id = "curTrend">&nbsp Current</h2>
        		<a id = "locker" href = "#" onclick = "lockOrUnlock();">[lock]</a>
            	<b>Keywords:</b><span id = "keywords"></span>
            	
         	</div>   
         	<div id = "tabs"> 
          		<ul>
          			<li id = "news_menu" class = "selected" ><a href="#" onclick="setTab(0)">Releated News</a></li>
          			<li id = "flickr_menu" ><a href="#" onclick="setTab(1);">Releated Pictures</a></li>
          			<li id = "youtube_menu" ><a href="#" onclick="setTab(2);">Releated Videos</a></li>
          			<li id = "chart_menu" ><a href="#" onclick="setTab(3);">Charts</a></li>
          		</ul>
           	</div>
           	<div id = "contentBox">
           		<div id = "news_div"></div>
           		<div id = "flickr_div" style = "display:none">
           			<div id = "leftPhoto"></div>
           			<div id = "rightPhoto"></div>
           		</div>
           		<div id = "youtube_div" style = "display:none">youtube</div>
           		<div id = "chart_div" style = "display:none">
           			<div id = "emotionChart"></div><div id = "devChart"></div>
           		</div>
        	</div>
        </div><!--main-->
        
        <div style="clear:both;"></div>
      </div><!--container-->
</div><!-- wrapper -->

 </body>
</html>
